import React, { Component } from 'react'
import { Card, Button } from 'antd'
import ReactEcharts from 'echarts-for-react'

/**
 * line图折线图
 */
export default class Line extends Component {
  state = {
    sales: [15, 24, 56, 34, 20, 60],
    inventorys: [25, 40, 45, 30, 10, 48]
  }

  getOption = () => {
    const { sales, inventorys } = this.state
    return {
      title: {
        text: 'React ECharts 折线图'
      },
      tooltip: {},
      legend: {
        data: ['销量', '库存']
      },
      xAxis: {
        data: ["衬衫", "羊毛衫", "雪纺衫", "裤子", "高跟鞋", "袜子"]
      },
      yAxis: {
        
      },
      series: [{
        name: '销量',
        type: 'line',
        data: sales,
        label: {
          show: true
        }
      }, {
        name: '库存',
        type: 'line',
        data: inventorys,
        label: {
          show: true
        }
      }]
    }
  }

  getOption2 = () => {
    return {
      xAxis: {
        type: 'category',
        boundaryGap: false,
        data: ['Mon', 'Tue', 'Wed', 'Thu', 'Fri', 'Sat', 'Sun']
      },
      yAxis: {
        type: 'value'
      },
      series: [{
        data: [820, 932, 901, 934, 1290, 1330, 1320],
        type: 'line',
        areaStyle: {
          color: {
            type: 'linear',
            x: 0,
            y: 0,
            x2: 0,
            y2: 1,
            colorStops: [
              {
                offset: 0,
                color: 'rgba(44,254,239,1)' // 0% 处的颜色
              },
              {
                offset: 0.3,
                color: 'rgba(44,254,239,0.6)' // 
              },
              {
                offset: 0.7,
                color: 'rgba(44,254,239,0.2)' // 
              },
              {
                offset: 1,
                color: 'rgba(44,254,239,0)' // 
              }
            ],
            global: false // 缺省为 false
          }
        },
        label: {
          show: true
        }
      }]
    }
  }

  update = () => {
    const sales = this.state.sales.map(sale => sale + 1)
    const inventorys = this.state.inventorys.map(inventory => inventory - 1)
    this.setState({
      sales,
      inventorys
    })
  }
  render() {
    return (
      <div>
        <Card>
          <Button type='primary' onClick={this.update}>更新</Button>
        </Card>
        <Card title='折线图一'>
          <ReactEcharts option={this.getOption()} style={{ height: 300 }} />
        </Card>
        <Card title='折线图二'>
          <ReactEcharts option={this.getOption2()} style={{ height: 300 }} />
        </Card>
      </div>
    )
  }
}
